var host = "http://192.168.3.66:8089";
var map = new BMapGL.Map("container");            // 创建Map实例
var mPoint = new BMapGL.Point(117.027988000, 36.0279810000);
map.enableScrollWheelZoom();
map.centerAndZoom(mPoint, 15);
var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl();  // 添加比例尺控件
map.addControl(zoomCtrl);
//map.enablePinchToZoom();//启用手指缩放功能
var local, bround,polyline,markerClusterer;
var cen = map.getCenter(); // 获取地图中心点
var arr=["marker","polyline","polygon"];
//监控
function jkRange(val) {
    var a = document.getElementById('rangeId');
    var b = document.getElementById('show_v');
    var sliderWidth = a.getBoundingClientRect().width;
    var outputWidth = b.getBoundingClientRect().width;
    var num = 0;
    if (val.value < 500) {
        num = 25;
    } else {
        num = 10;
    }
    //将滑块宽度乘以滑块值与滑块范围的比率来完成的.
    var offset = a.value / (a.max - a.min) * sliderWidth - outputWidth / 2 + num;
    $("#show_v").text(val.value + "米").css("left", offset + "px");
    //百度地图
    removeOverlay();
    var circle = new BMapGL.Circle(mPoint, val.value, {
        fillColor: "blue",
        strokeWeight: 1,
        fillOpacity: 0.3,
        strokeOpacity: 0.3
    });
    map.addOverlay(circle);
    local = new BMapGL.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});
    bround = val.value;
}
//监控2
function jkRange2() {
   // local.searchNearby('餐馆', mPoint, bround);

    $http("POST",host+"/api/cameraxlCon/selectAllByCircle",JSON.stringify({
        lng:117.027988000,
        lat:36.0279810000,
            radius:parseFloat(bround*(1/111000))
        }),function(result){
        console.log(result);
        if(result.data.length==0){
            alert("暂无数据");
        }else {
            for(var i=0;i<result.data.length;i++){
            //    map.addOverlay(new BMapGL.Marker(new BMapGL.Point(result.data[i].x,result.data[i].y)));
                CarMessage(map, "../../app_map/img/sxt.png", result.data[i].x, result.data[i].y, 75, 75, "","");
            }
        }

    },function(err){
        console.log(err);
    })
}

//车辆
function showCar() {
    var wsen = map.getBounds();
    var datas=JSON.stringify({
        "west": wsen.sw.lng,    //117.027988000,  为西经必填
        "south": wsen.sw.lat,    //36.0279810000,  为南纬必填
        "east": wsen.ne.lng,     //113.955270675,  为东经必填
        "north": wsen.ne.lat     //.8980994308    为北纬必填
    });
    $http("POST", host+"/api/positionCon/selectAllByRectangle",datas, function (result) {
        if (result.code == 0) {
            removeOverlay();
            $(result.data).each(function (a, b) {
                CarMessage(map, "../../app_map/img/car.png", b.x, b.y, 150, 100, "车辆信息", "车牌号：" + b.cph);
            })
        }
    }, function err(e) {
        console.log(e);
    });

}
//消防栓
function hydrant() {
   var wsen = map.getBounds();
    var datas=JSON.stringify({
        "west": wsen.sw.lng,    //117.027988000,  为西经必填
        "south": wsen.sw.lat,    //36.0279810000,  为南纬必填
        "east": wsen.ne.lng,     //113.955270675,  为东经必填
        "north": wsen.ne.lat     //.8980994308    为北纬必填
    });
   $http("POST", host+"/api/firehydrantCon/selectAllByRectangle",datas, function (result) {
        console.log(result);
        if (result.code == 0) {
            removeOverlay();
            $(result.data).each(function (a, b) {
                CarMessage(map,"../../app_map/img/water_red.png", b.x, b.y,150,150,"水源信息","创建单位："+
                    b.createrunitname+"</br>创建名称："+ b.creatername+"</br>地址："+ b.address+"</br>小区："+ b.ssldid);
            });
        }
    }, function err(e) {
        console.log(e);
    });

}
function $http(type, url,val, success_callback, error_callback) {
    $(".load").show(300);
    $.ajax({
        //请求方式
        type: type,//",
        //请求地址
        url: url,
        //内容类型
        contentType: "application/json;charset=UTF-8",//application/json;charsetset=UTF-84
      //  dataType: "json",
        //参数
        data:val,
        //请求成功
        success: function (result) {
            if (typeof(success_callback) == 'function') {
                success_callback(result); //成功后回调函数
                $(".load").hide(300);
                alert("成功回调");
            }
        },
        //请求失败，包含具体的错误信息
        error: function (e) {
            if (typeof error_callback == "function") {
                error_callback(e); //成功后回调函数
                $(".load").hide(300);
                alert("失败回调");
            }
        }
    });
}


function CarMessage(map, img, x, y, width, height, message, alertMessage) {
    // 创建图标
    var myIcon = new BMapGL.Icon(img, new BMapGL.Size(25,25));
// 创建Marker标注，
    var pt = new BMapGL.Point(x, y);
    var marker = new BMapGL.Marker(pt, {
        icon: myIcon
    });
// 将标注添加到地图
    map.addOverlay(marker);
// 创建信息窗口
    var opts = {
        width: width,
        height: height,
        title: message
    };
    var infoWindow = new BMapGL.InfoWindow(alertMessage, opts);
// 点标记添加点击事件
    marker.addEventListener('click', function () {
        // 开启信息窗口
        if(message==""){
            window.location.href='../../app_map/videoHtml/video.html?list=[{"name":"CCTV1","url":"http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8"},{"name":"CCTV3","url":"http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8"},{"name":"CCTV5","url":"http://ivi.bupt.edu.cn/hls/cctv5phd.m3u8"}]';
        }else {
            map.openInfoWindow(infoWindow, pt);
        }

    });
}
// 清除覆盖物
function removeOverlay() {
    map.clearOverlays();
}

//地图缩放重新计算聚合点
map.addEventListener("zoomend", function () {
  //  markerClustersPoint(markers);
    console.log("我移动了");
    console.log(map.getBounds());
});
//拖拽结束
map.addEventListener( "dragend" , function showInfo(){
    var  cp = map.getCenter();
    console.log(cp.lng +  ","  + cp.lat);
});

//展示监控
function jk(){
    $(".jk").show(300);
}
//展示标会
function bh(){

    $("#plotting").show(300);
    draw(arr[0]);
}
mui.init({
    swipeBack: false
});
(function($) {
    $('.mui-scroll-wrapper').scroll({
        indicators: true //是否显示滚动条
    });

    document.getElementById('slider').addEventListener('slide', function(e) {
        console.log(e);
        if (e.detail.slideNumber === 0) {
            draw(arr[e.detail.slideNumber]);
            console.log("切换到第一个");
        } else if (e.detail.slideNumber === 1) {
            console.log("切换到第二个");
            draw(arr[e.detail.slideNumber]);
        }else if(e.detail.slideNumber === 2){
            console.log("切换到第三个");
            draw(arr[e.detail.slideNumber]);
        }else if(e.detail.slideNumber === 3){
            console.log("切换到第4个");
            //单击事件,文本标注e
            map.addEventListener( "click" , function(e){
                console.log('点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat);
            });
            var marker1 = new BMapGL.Marker(new BMapGL.Point(116.404, 39.925));
            map.addOverlay(marker1);
            var opts = {
                position: new BMapGL.Point(116.2787, 40.0492), // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(30, -30) // 设置文本偏移量
            };
// 创建文本标注对象
            var label = new BMapGL.Label('欢迎使用百度地图JSAPI GL版本', opts);
// 自定义文本标注样式
            label.setStyle({
                color: 'blue',
                borderRadius: '5px',
                borderColor: '#ccc',
                padding: '10px',
                fontSize: '16px',
                height: '30px',
                lineHeight: '30px',
                fontFamily: '微软雅黑'
            });
            map.addOverlay(label);
        }else if(e.detail.slideNumber === 4){
            console.log("切换到第5个");
        }else if(e.detail.slideNumber === 5){
            console.log("切换到第6个");
        }
    });
//        var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
//        $('.mui-input-group').on('change', 'input', function() {
//            if (this.checked) {
//                sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
//                //force repaint
//                sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
//            }
//        });
})(mui);
//标绘
var styleOptions = {
    strokeColor: '#5E87DB',   // 边线颜色
    fillColor: '#5E87DB',     // 填充颜色。当参数为空时，圆形没有填充颜色
    strokeWeight: 2,          // 边线宽度，以像素为单位
    strokeOpacity: 1,         // 边线透明度，取值范围0-1
    fillOpacity: 0.2          // 填充透明度，取值范围0-1
};
var labelOptions = {
    borderRadius: '2px',
    background: '#FFFBCC',
    border: '1px solid #E1E1E1',
    color: '#703A04',
    fontSize: '12px',
    letterSpacing: '0',
    padding: '5px'
};

// 实例化鼠标绘制工具
var drawingManager = new BMapGLLib.DrawingManager(map, {
    // isOpen: true,        // 是否开启绘制模式
    enableCalculate: false, // 绘制是否进行测距测面
    enableSorption: true,   // 是否开启边界吸附功能
    sorptiondistance: 20,   // 边界吸附距离
    circleOptions: styleOptions,     // 圆的样式
    polylineOptions: styleOptions,   // 线的样式
    polygonOptions: styleOptions,    // 多边形的样式
    rectangleOptions: styleOptions,  // 矩形的样式
    labelOptions: labelOptions      // label样式
});
var drawingType;
function draw(e) {
    switch(e) {
        case 'marker': {
             drawingType = BMAP_DRAWING_MARKER;
            break;
        }
        case 'polyline': {
             drawingType = BMAP_DRAWING_POLYLINE;
            break;
        }
        case 'rectangle': {
             drawingType = BMAP_DRAWING_RECTANGLE;
            break;
        }
        case 'polygon': {
             drawingType = BMAP_DRAWING_POLYGON;
            break;
        }
        case 'circle': {
             drawingType = BMAP_DRAWING_CIRCLE;
            break;
        }
    }
    // 进行绘制
    if (drawingManager._isOpen && drawingManager.getDrawingMode() === drawingType) {
        drawingManager.close();

        console.log(11111111111111)

    } else {
        drawingManager.setDrawingMode(drawingType);
        drawingManager.open();

        console.log(222222222222)

    }
};
//护航
function ends(){
    drawingManager.close();
 // polyline.enableEditing();;//启动编辑

}



// 绘制面测试屏幕范围
/* var polygon = new BMapGL.Polygon([
 new BMapGL.Point(wsen.sw.lng, wsen.sw.lat), //西经,南纬
 new BMapGL.Point(wsen.sw.lng, wsen.ne.lat),//西经,北纬
 new BMapGL.Point(wsen.ne.lng, wsen.ne.lat),//东经,北纬
 new BMapGL.Point(wsen.ne.lng, wsen.sw.lat)//东经,南纬
 ], {
 strokeColor: 'blue',
 strokeWeight: 2,
 strokeOpacity: 0.5
 });
 map.addOverlay(polygon);*/